﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>RolesList</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
    <div>
        <div style="padding: 16px">
            <div class="layui-card">
                <div class="layui-card-body">
                    <h3>角色表格</h3>
                    <table class="layui-hide" id="testRole" lay-filter="testRole"></table>
                </div>
            </div>
        </div>
    </div>
    <script type="text/html" id="toolbarDemoRole">
        <div class="layui-btn-container" style="width: auto;">
            <div class="layui-form-item" style="position: relative;">
                <button class="layui-btn layui-btn-sm" lay-event="add" >添加</button>
            </div>
        </div>
    </script>
    <script type="text/html" id="barDemoRole">
        <div class="layui-clear-space">
            <a class="layui-btn layui-btn-xs" lay-event="edit">权限设置</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
        </div>
    </script>
    <script>
        var table;
        layui.use(["table", 'layer', 'util'], function () {
        table = layui.table;
            var dropdown = layui.dropdown;
            var util = layui.util;
            var layer = layui.layer;
        // 创建渲染实例
            table.render({
                elem: "#testRole",
                url: "/Role/RoleContent", // 此处为静态模拟数据，实际使用时需换成真实接口
                toolbar: "#toolbarDemoRole",
                defaultToolbar: [],
                height: "full-30", // 最大高度减去其他容器已占有的高度差
                css: [
                    // 重设当前表格样式
                    ".layui-table-tool-temp{padding-right: 145px;}",
                ].join(""),
                cellMinWidth: 80,
                totalRow: true, // 开启合计行
                page: {
                    limit: 10
                },
                cols: [[ //表头

                    { field: 'RoleName', title: '角色名称' }
                    , { field: 'BaseSalary', title: '底薪'}
                    , { field: 'Proportion', title: '提成比例',  templet: d => { return (d.Proportion || 0) + '%'; } }
                    , {
                        field: 'CreateTime', title: '创建时间',  templet: d => { return util.toDateString(d.CreateTime.replace('/Date(', '').replace(')/', ''), 'yyyy-MM-dd ') }
                    }
                    , { fixed: 'right', title: '操作', width: 150, minWidth: 125, templet: '#barDemoRole' }
                ]],
            });
                table.on('tool(testRole)', function (obj) { // 双击 toolDouble
                    var data = obj.data; // 获得当前行数据
                    // console.log(obj)
                    if (obj.event == 'del') {
                        //删除
                        layer.confirm('真的删除行么', function (index) {
                            //ajax
                            $.post("/role/delete", { Id: data.Id }, function (resp) {
                                if (resp.code === 0) {
                                    obj.del();
                                }
                            });
                            layer.close(index);
                            layer.msg('删除成功');
                            //页面的table重载
                            table.reload('testRole')

                        });
                    }
                    //编辑
                    if (obj.event == 'edit') {
                        //1.div
                        //2.重新写一个页面
                        layer.open({
                            type: 2,
                            content: '/role/add/' + obj.data.Id, //这里content是一个普通的String
                            area: ['1000px', '600px']
                        });
                    }
                });
                //工具栏事件
                //添加
                table.on('toolbar(testRole)', function (obj) {
                    if (obj.event == 'add') {
                        layer.open({
                            type: 2,
                            content: '/role/add', //这里content是一个普通的String
                            area: ['1000px', '600px']
                        });
                    }
                })
            });
    </script>
</body>
</html>
